<%@ page import="com.lagou.studentsystem.model.User" %>
<%@ page import="com.lagou.studentsystem.model.Student" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理系统-管理页面</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">
    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="bootstrap.min.js" type="text/javascript"></script>


</head>
<body>

<div class="page-header" style="margin-left: 50px">
    <h1>
        学生管理系统
    </h1>
</div>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h1 style="margin-top: 50px;margin-bottom: 50px">
                登陆成功，欢迎<%=((User) session.getAttribute("user")).getUserName()%>使用</h1>

            <div style="margin-left: 640px;margin-bottom: 50px">
                <caption>
                    <button class=" btn btn-primary" id="user_add" data-toggle="modal" data-target="#myModal">新增
                    </button>
                    <button class="btn btn-primary" id="user_delete" type="submit">删除</button>
                    <button class="btn btn-primary" id="user_edit" data-toggle="modal" data-target="#myModal">编辑
                    </button>
                    <button class="btn btn-primary" id="user_find" type="submit">查询</button>
                    <input type="text" id="s_code" placeholder="按工号查询" style="width: 130px;" name="s_code">
                    <input type="text" id="s_username" placeholder="按姓名查询" style="width: 130px;" name="s_username">
                </caption>
            </div>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>
                    </th>
                    <th>
                        学号
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        性别
                    </th>
                    <th>
                        出生日期
                    </th>
                    <th>
                        邮箱
                    </th>
                    <th>
                        备注
                    </th>
                </tr>
                </thead>
                <tbody>
                <%
                    List<Student> studentList = (List) session.getAttribute("studentList");
                    int size = studentList.size();
                    for (int i = 0; i < studentList.size(); i++) {
                %>
                <tr>
                    <td>
                        <label>
                            <input type="checkbox" name="checkbox">
                        </label>
                    </td>
                    <td id="tdm_code"><%=studentList.get(i).getStu_id()%>
                    </td>
                    <td id="tdm_username"><%=studentList.get(i).getStu_name()%>
                    </td>
                    <td id="tdm_sex"><%=studentList.get(i).getStu_sex()%>
                    </td>
                    <td id="tdm_birthday"><%=studentList.get(i).getStu_birthday() %>
                    </td>
                    <td id="tdm_email"><%=studentList.get(i).getStu_email() %>
                    </td>
                    <td id="tdstu_remarks"><%=studentList.get(i).getStu_remarks() %>
                    </td>
                    <%
                        }
                    %>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


<!-- 模态框 -->
<div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aria-hidden="true">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"> 新增用户</h4>
            </div>
            <form action="InsertStudent" method="post" role="form" id="from_action">
                <div class="modal-body" id="modal-body">
                    <label for="name">学号</label>
                    <input type="text" class="form-control" id="m_code" placeholder="请输入学号" name="m_code">
                    <input type="text" hidden="hidden" id="oldStudentId" name="oldStudentId">
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" id="m_username" placeholder="请输入姓名" name="m_username">

                    <label for="name">性别</label>
                    <input type="text" class="form-control" id="m_sex" placeholder="请输入性别" name="m_sex">

                    <label for="name">出生日期</label>
                    <input type="date" class="form-control" id="m_birthday" placeholder="请输入出生日期" name="m_birthday">

                    <label for="name">邮箱</label>
                    <input type="text" class="form-control" id="m_email" placeholder="请输入邮箱" name="m_email">

                    <label for="name">备注</label>
                    <input type="text" class="form-control" id="stu_remarks" placeholder="请输入备注信息" name="stu_remarks">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">提交更改</button>
                </div>
            </form>
        </div>
    </div>
</div>
<ul class="pagination" style="margin-left: 500px">
    <li>
        <a href="#">Prev</a>
    </li>
    <% for (int i = 1; i <= size / 5; i++) { %>
    <li>
        <a href="#"><%=i%>
        </a>
    </li>
    <% }%>
    <li>
        <a href="#">Next</a>
    </li>
    <li>
        <a href="#" id="returnMain">回到首页</a>
    </li>
</ul>
<script type="text/javascript">

    // 删除用户
    $("#user_delete").on("click", function () {
        var checkbox = $("input[type='checkbox']");  // 获取所有的复选框
        let f = false;  // 是否选中用户的标记
        for (var i = 0; i < checkbox.length; i++) {
            var box = checkbox[i];
            if (box.checked) {   // 某个复选框被选中的
                f = true;  // 标记 有复选框被选中
                box = $(box);  // jsdom对象转换成jquery对象
                let studentId = box.parent().parent().next().text();  // 复选框父级的兄弟#code元素
                window.location = ("removeStudent?studentId=" + studentId);
            }
        }
        if (!f) {
            alert("请选择一个用户！");
        }
    });

    // 新增用户
    $("#user_add").on("click", function () {
        $("#from_action").attr("action", "InsertStudent");

    });

    // 编辑用户
    $("#user_edit").on("click", function () {
        var checkboxs = $("input[type='checkbox']");
        let f = false;
        for (var i = 0; i < checkboxs.length; i++) {
            var box = checkboxs[i];
            if (box.checked) {  // 某个复选框被选中的
                f = true;
                $(this).attr("data-toggle", "modal");     // 启用模态框
                $(this).attr("data-target", "#myModal");  // 启用模态框
                box = $(box);  // jsdom对象转换成jquery对象
                // 获取表格中选中用户的各项数据
                var code = box.parent().parent().siblings("#tdm_code").text();
                var username = box.parent().parent().siblings("#tdm_username").text();
                var sex = box.parent().parent().siblings("#tdm_sex").text();
                var email = box.parent().parent().siblings("#tdm_email").text();
                var birthday = box.parent().parent().siblings("#tdm_birthday").text();
                var remarks = box.parent().parent().siblings("#tdstu_remarks").text();

                // 选中用户的各项数据，放在模态框对应的input框中
                $("#m_code").val(code);
                $("#m_username").val(username);
                $("#m_sex").val(sex);
                $("#m_email").val(email);
                $("#m_birthday").val(birthday);
                $("#stu_remarks").val(remarks);
                $("#from_action").attr("action", "updateStudent");
                $("#oldStudentId").val(code);
            }
        }
        if (!f) {
            alert("请选择一个用户！");
            $(this).attr("data-toggle", "null");     // 禁用模态框
            $(this).attr("data-target", "null");  // 禁用模态框
        }
    });


    // 查询用户
    $("#user_find").on("click", function () {
        var code = $("#s_code").val();
        var username = $("#s_username").val();
        if (code == "" && username == "") {
            alert("请输入查询条件！（姓名或者工号）");
        }
        window.location = ("findStudentByidOrName?id=" + code + "&name=" + username);
    });

    $("#returnMain").on("click", function () {
        window.location = ("findStudentAll");
    });


</script>

</body>
</html>
